<template>
  <div id="container">
    <div style="z-index: 100">class.name</div>
    <!-- <img src="../../assets/位置-1.png" alt=""> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      map: null,
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成(可以访问当前this实例)
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {
    this.initMap()
  }, //生命周期 - 挂载完成(可以访问DOM元素)
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      var _this = this
      AMapLoader.load({
        key: '7bf1afe0a111e75bc96b5f5d0553b5f3', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          _this.map = new AMap.Map('container', {
            //设置地图容器id
            // resizeEnable: true,
            viewMode: '3D', //是否为3D地图模式
            zoom: 16, //设置地图的缩放级别
            center: [119.646354, 29.129608], //初始化地图中心点位置
            mapStyle: 'amap://styles/macaron', // 设置地图的显示样式
          })
          // 在地图创建之后使用Map对象的setMapStyle方法来修改自定义地图
          // this.map.setMapStyle('amap://styles/whitesmoke');
          // _this.initMarks()
          _this.initMark()
        })
        .catch((e) => {
          console.log(e)
        })
    },
    /**
     * 普通点坐标
     */
    initMark() { 
      var icon = new AMap.Icon({
        size: new AMap.Size(40, 40),
        image: 'https://i.postimg.cc/3rDqPJvb/1.png',
        imageSize:new AMap.Size(40,40)
      })
      // var markerList = [marker1,marker2]
      var marker1 = new AMap.Marker({
        position: new AMap.LngLat(119.645354, 29.135608),
        title: '师范大学',
        icon: icon,
        offset:new AMap.Pixel(-20,-40)
      })
      var marker2 = new AMap.Marker({
        position: new AMap.LngLat(119.644354, 29.135708),
        title: "师范大学2",
        icon: icon,
        offset:new AMap.Pixel(-20,-40)
      })
      var marker3 = new AMap.Marker({
        position: new AMap.LngLat(119.642554, 29.135708),
        title: "师范大学3",
        icon: icon,
        offset:new AMap.Pixel(-20,-40)
      })
      this.map.add([marker1,marker2,marker3])
    },



    /**
     * 海量点坐标
     */
    initMarks() { 
      let mass;
      let style = [
      {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
            anchor: new AMap.Pixel(14, 15), //图标显示位置偏移量
            size: new AMap.Size(26, 30), //图标的尺寸
            zIndex: 5 //点展示优先级，默认为使用样式的索引值
          },
          {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
            anchor: new AMap.Pixel(14, 15),
            size: new AMap.Size(20, 30),
            zIndex: 4
          },
          {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
            anchor: new AMap.Pixel(18, 20),
            size: new AMap.Size(36, 36),
            zIndex: 3
          },
          {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
            anchor: new AMap.Pixel(18, 20),
            size: new AMap.Size(36, 36),
            zIndex: 2
          },
          {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
            anchor: new AMap.Pixel(18, 20),
            size: new AMap.Size(36, 36),
            
          },
          {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new AMap.Pixel(18, 20),
            size: new AMap.Size(36, 36),
            zIndex: 0
          }
      ]
      let data = [
        {
          lnglat: ['116.466752,39.951042'],
          name: 'one',
          id:1
        },
        {
          lnglat: ['116.675933,39.986343'],
          name: 'two',
          id:2
        },
        {
          lnglat: ['117.270073,37.96162'],
          name: 'three',
          id:3
        },
        {
          lnglat: ['117.212164,31.831641'],
          name: 'fthoor',
          id:4
        }
      ]
      mass = new AMap.MassMarks(data,{
        opacity: 0.8,
        zIndex: 2,
        cursor: "pointer",
        style: style
      })
      console.log(mass);
      console.log(this.map)
      mass.setMap(this.map)
    }
  },
}
</script>
<style scoped>
#container {
  width: 1420px;
  height: 1158px;
}
</style>